<template>
	<div class="index" style="background: rgb(246, 248, 251);" >
    <van-nav-bar title="订单" left-arrow  @click-left="onClickLeft" />
    <div style=" padding:0.3rem;">

        <div style="border-radius: 0.3rem; overflow: hidden; margin-bottom: 0.3rem; background: #fff;" v-for="item in list" :key="item.id">
          <div class="flexbc" style="height: 0.8rem; padding: 0 0.3rem; background: rgb(228, 237, 255); color: rgb(0, 90, 255); font-size: 0.24rem;">
            <div class="flexc">
              订单号：{{item.order_no}}
              <div style="margin-left: 0.2rem;" @click="copy(item.order_no)"><img src="../../../static/img/fuzhiing.png" style="width: 0.28rem;"></div>
            </div>
            <div>{{item.status_name}}</div>
          </div>
          <div style="padding: 0.3rem;">
            <div style="font-weight: bold; font-size: 0.34rem; margin-bottom: 0.3rem;">{{item.goods_name}}</div>
            <div class="flexbc" style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);">
              <div>收件人</div>
              <div style=" font-size: 0.3rem; font-weight: bold;  max-width: 4rem;">{{item.address_name}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);">
              <div>生产号码</div>
              <div style="color: rgb(120, 125, 133); max-width: 4rem;">{{item.plan_mobile_produce}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);">
              <div>快递公司</div>
              <div style="color: rgb(120, 125, 133); max-width: 4rem;">{{item.tracking_company_id}}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);">
              <div>快递单号</div>
              <div style="color: rgb(120, 125, 133); max-width: 4rem;">{{item.tracking_number}}</div>
            </div>
            <div  class="flexbc" style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);">
              <div>交易状态</div>
              <div style="color: rgb(120, 125, 133); max-width: 4rem;">{{item.pay_name}}</div>
            </div>
            <div v-if="item.pay_status==1&&item.refund==1" style="display: flex;justify-content: end;">
              <div @click="tkuan(item)" style="color: #287AFD;border: 1px solid #287AFD; border-radius: 0.4rem;padding: 0.1rem 0.3rem;font-size: 0.24rem;text-align: center;">申请退款</div>
            </div>
            <!-- <div v-if="item.pay_status==5||item.pay_status==6||item.pay_status==8" style="display: flex;justify-content: end;">
              <div  style="font-size: 0.24rem;text-align: center;">{{ item.pay_name }}</div>
            </div> -->
          </div>
        </div>

    </div>
	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
		data() {
			return {
        all:{
          mobile:"",
          id_card_num:"",

        },
        list:[],
        all2:{}
			}
		},
		created() {

      this.all.mobile = this.$route.query.mobile
      this.all.id_card_num = this.$route.query.id_card_num

      this.getlist()
		},
		mounted() {
      document.title = "订单查询"
		},
		methods: {
      getlist(){
        axios.get('/api/search/order',{params:this.all}).then((response)=>{
          if (response.data.msg.code == 0) {
            this.list = response.data.data
          } else {
            vant.Toast(response.data.msg.info);
          }
        })
      },
      changes:function(v){
        // console.log(this.$refs.m1)
        // if(v == 1){

        //   this.$refs.m2.focus()
        // }
        // if(v == 2){
        //   this.$refs.m3.focus()
        // }
        // if(v == 3){
        //   this.$refs.m4.focus()
        // }
      },
      xiadan:function(){
        this.all.id_card_num = this.all2.mobile1 + this.all2.mobile2 + this.all2.mobile3 + this.all2.mobile4

        axios.post('/api/search/order',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {

        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      onClickLeft:function(){
        this.$router.back(-1)
      },
      //申请退款
      tkuan(item){
        vant.Dialog.confirm({
          title: '提示',
          message: '是否确认申请退款',
        })
          .then(() => {
            // on confirm
            axios.post('/api/search/order/refund',{
              mobile:this.$route.query.mobile,
              order_no:item.order_no,
            }).then((response)=>{
              if (response.data.msg.code == 0) {
                vant.Toast('操作成功');
                this.getlist()
              } else {
                vant.Toast(response.data.msg.info);
              }
            })
          })
          .catch(() => {
            // on cancel
          });
      }
		}
	}
</script>


<style scoped lang="less">
  .index{
    .af{ position: relative; z-index: 2;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 6px;
        background: rgb(232, 237, 252);
        z-index: -1;
      }
    }
  }
</style>
